<template>
  <div class="wrapper index">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="历史变迁">
        <history-rolling v-if="nowTab == '0'" />
      </el-tab-pane>
      <el-tab-pane label="人物设定">
        <people-relate v-if="nowTab == '1'" />
      </el-tab-pane>
      <el-tab-pane label="知识储备">
        <story-flow v-if="nowTab == '2'" />
      </el-tab-pane>
      <el-tab-pane label="修炼体系">
        <immortal-setting v-if="nowTab == '3'" />
      </el-tab-pane>
      <el-tab-pane label="大纲设定">
        <struct-setting v-if="nowTab == '4'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PeopleRelate from '@/components/tabs/PeopleRelate'
import HistoryRolling from '@/components/tabs/HistoryRolling'
import StoryFlow from '@/components/tabs/StoryFlow'
import ImmortalSetting from '@/components/tabs/ImmortalSetting'
import StructSetting from '@/components/tabs/StructSetting'

export default {
  name: 'TalkIndex',
  components: {
    PeopleRelate,
    HistoryRolling,
    StoryFlow,
    ImmortalSetting,
    StructSetting
  },
  data() {
    return {
      nowTab: '0',
    }
  },
  methods: {
    handleClick(e) {
      this.nowTab = e.index
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-tabs {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  .el-tab-pane {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  ::v-deep .el-tabs__content {
    padding: 6px;
    height: 100%;
  }
}

</style>
